app.component("demo-async", {
    template: `
    <div class="demo-async">
        <!-- <async-com></async-com> -->

        <!-- 使用suspense来加载异步组件 -->
        <suspense>

            <!-- 显示正常内容：加载需要一定时间 -->
            <!-- <template v-slot:default> -->
            <template #default>
                <async-com></async-com>
            </template>

            <!-- 显示加载过程 -->
            <!-- <template v-slot:fallback> -->
            <template #fallback>
                <h1>Loading...</h1>
            </template>

        </suspense>
    </div>
    `,
    data() {
        return {}
    },
    methods: {},
    computed: {}
})

/* 定义普通组件/同步组件 */
// app.component("async-com",{
//     template:`<div>哥是异步组件</div>`
// })

/* 定义异步组件 */
const AsynCom = Vue.defineAsyncComponent(

    /* 入参是一个回调函数：suspense加载内容时回调 */
    () => {
        // 返回一个延时履约/兑现组件内容的Promise对象
        return new Promise(
            (resolve, reject) => {

                /* 在3秒后履约组件数据 */
                setTimeout(() => {
                    resolve({
                        template: `<div>哥是异步组件</div>`
                    })
                }, 3000);

            }
        )
    }

)

app.component("async-com", AsynCom)